<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			canvas{
				border: 1px solid;
			}
			body{
				margin: 0;
				padding: 0;
			}
			#nav ul {
				zoom: 1;
				overflow: hidden;
				list-style: none;
				margin: 0;
				padding: 0;
				background: #eeeeee;
			}
			
			#nav li {
				float: left;
				width: 135px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				text-decoration: none;
			}
			
			#nav a {
				color: #333;
				text-decoration: none;
			}
			
			#nav a .en {
				display: none;
			}
			
			#nav a:hover {
				display: block;
				background: #dddddd;
				font-weight: 700;
				color: #222;
			}
			
			#nav a:hover .en {
				display: inline;
			}
			
			#nav a:hover .cn {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="nav">
				<ul>
					<li id="first">
						<a href="index.html"><span class="cn">首页</span><span class="en">Homepage</span></a>
					</li>


					<li>
						<a href="beijing.html"><span class="cn">个人简历</span><span class="en">个人简历</span></a>
					</li>
					<li>
						<a href="Baoposhizhong.html"><span class="cn">爆破时钟</span><span class="en">爆破时钟</span></a>
					</li>


					<li>
						<a href="free.html"><span class="cn">自由坠体</span><span class="en">自由坠体</span></a>
					</li>


					<li>
						<a href="huizhihuabu.html"><span class="cn">绘制画布</span><span class="en">绘制画布</span></a>
					</li>
					
					<li>
						<a href="manyballs.html"><span class="cn">缤纷小球</span><span class="en">缤纷小球</span></a>
					</li>
					
					<li>
						<a href="screen .html"><span class="cn">屏幕保护</span><span class="en">屏幕保护</span></a>
					</li>


					<li>
						<a href="TaiJi3.html"><span class="cn">运动太极</span><span class="en">运动太极</span></a>
					</li>
					
					<li>
						<a href="Tantiaoxiaoqiu.html"><span class="cn">弹跳小球</span><span class="en">弹跳小球</span></a>
					</li>
				</ul>
			</div>
		<canvas id="myCanvas" width="500" height="400"></canvas>
		<script type="text/javascript">
		//获取画布
		var canvas = document.getElementById("myCanvas");
		//创建画笔
		var ctx = canvas.getContext("2d");
		
		var img = new Image();
		img.src="img/timg (1).jpg";
		img.onload = function(){
			ctx.drawImage(this,0,0 ,500,400);
		
		
		ctx.fillStyle = "palevioletred";
		ctx.fillRect(30,200,140,150);
		ctx.fillStyle = "lightblue";
		ctx.fillRect(74,282,50,68);
		ctx.beginPath();
		ctx.arc(110,320,4,0,2*Math.PI);
		//ctx.shadowBlur = 60;
		//ctx.shadowColor = "#FFFF00";
		ctx.closePath();
		//ctx.stroke();
		ctx.fillStyle = "yellowgreen";
		ctx.fill();
		
		ctx.fillStyle = "aquamarine";
		ctx.fillRect(57,227,25,25);
		ctx.fillStyle = "aliceblue";
	    ctx.fillRect(60,230,8,8);
	    ctx.fillStyle = "aliceblue";
	    ctx.fillRect(71,230,8,8);
	    ctx.fillStyle = "aliceblue";
	    ctx.fillRect(60,240,8,8);
	    ctx.fillStyle = "aliceblue";
	    ctx.fillRect(71,240,8,8);
	    
	    ctx.fillStyle = "aquamarine";
		ctx.fillRect(116,227,25,25);
	    ctx.fillStyle = "aliceblue";
	    ctx.fillRect(120,230,8,8);
	    ctx.fillStyle = "aliceblue";
	    ctx.fillRect(120,240,8,8);
	    ctx.fillStyle = "aliceblue";
	    ctx.fillRect(130,230,8,8);
	    ctx.fillStyle = "aliceblue";
	    ctx.fillRect(130,240,8,8);
	    
		ctx.beginPath();
		ctx.moveTo(100,100);
		ctx.lineTo(200,200);
		ctx.lineTo(0,200);
		ctx.lineTo(100,100);
		ctx.closePath();
		//ctx.stroke();
		ctx.fillStyle = "#DEB887";
		ctx.fill();
		
		
		ctx.beginPath();
		ctx.arc(210,280,30,0,2*Math.PI);
		ctx.closePath();
		//ctx.stroke();
		ctx.fillStyle = "green";
		ctx.fill();
		ctx.beginPath();
		ctx.moveTo(210,310);
		ctx.lineTo(210,370);
		ctx.stroke();
		ctx.closePath();
		
		ctx.beginPath();
		ctx.arc(250,330,30,0,2*Math.PI);
		ctx.closePath();
		//ctx.stroke();
		ctx.fillStyle = "green";
		ctx.fill();
		ctx.beginPath();
		ctx.moveTo(250,360);
		ctx.lineTo(250,410);
		ctx.stroke();
		ctx.closePath();
		
		ctx.beginPath();
		ctx.arc(20,330,30,0,2*Math.PI);
		ctx.closePath();
		//ctx.stroke();
		ctx.fillStyle = "green";
		ctx.fill();
		ctx.beginPath();
		ctx.moveTo(20,360);
		ctx.lineTo(20,410);
		ctx.stroke();
		ctx.closePath();
		
		ctx.beginPath();
		ctx.arc(200,30,15,0,2*Math.PI);
		ctx.closePath();
		//ctx.stroke();
		ctx.fillStyle = "aliceblue";
		ctx.fill();
		ctx.beginPath();
		ctx.arc(215,50,15,0,2*Math.PI);
		ctx.closePath();
		//ctx.stroke();
		ctx.fillStyle = "aliceblue";
		ctx.fill();
		ctx.beginPath();
		ctx.arc(185,45,15,0,2*Math.PI);
		ctx.closePath();
		//ctx.stroke();
		ctx.fillStyle = "aliceblue";
		ctx.fill();
		ctx.beginPath();
		ctx.arc(225,35,15,0,2*Math.PI);
		ctx.closePath();
		//ctx.stroke();
		ctx.fillStyle = "aliceblue";
		ctx.fill();
		
		//ctx.beginPath();
		//ctx.arc(350,200,71,0,Math.PI);
		//ctx.lineTo(350,200);
		//ctx.closePath();
		//ctx.stroke();
		//ctx.fillStyle = "yellowgreen";
		//ctx.fill();
		
		ctx.beginPath();
		ctx.arc(10,10,50,0,2*Math.PI);
		ctx.shadowBlur = 60;
		ctx.shadowColor = "#FFFF00";
		ctx.closePath();
		//ctx.stroke();
		ctx.fillStyle = "red";
		ctx.fill();
		}
		
		
		
			
		</script>
	</body>
</html>
